<template>
  <section style="margin: -24px">
    <n-card content-style="padding-top: 10px; padding-bottom: 0px;">
      <n-page-header>
        <template #header>
          <n-breadcrumb>
            <n-breadcrumb-item v-for="breadcrumb in breadcrumbs" :key="breadcrumb.name">
              <router-link :to="breadcrumb.path" custom v-slot="{ navigate }">
                <span @click="navigate" role="link">{{ breadcrumb.name }}</span>
              </router-link>
            </n-breadcrumb-item>
            <n-breadcrumb-item>{{ currentBreadcrumb.name }}</n-breadcrumb-item>
          </n-breadcrumb>
        </template>
        <template #title>
          <b style="font-size: 20px">{{ currentBreadcrumb.name }}</b>
        </template>
        <div class="mb-md">
          <slot name="content">{{ content }}</slot>
        </div>
        <n-tabs
          v-if="tabList.length"
          class="mt-lg"
          size="large"
          :default-value="tabkey ?? tabList[0].key"
          @update:value="handleTabsChange"
        >
          <n-tab-pane class="pa-none" v-for="tab in tabList" :key="tab.key" :name="tab.key" :tab="tab.tab"></n-tab-pane>
        </n-tabs>
      </n-page-header>
    </n-card>
    <main class="content">
      <slot></slot>
    </main>
  </section>
</template>

<script lang="ts">
import { asyncRouterMap } from '@/config/router.config'
import { RouterMap } from '@/router/typings'
import { defineComponent, PropType } from 'vue'
import { useRoute } from 'vue-router'

type Breadcrumb = {
  path: string
  name: string
}

type Tab = {
  key: string | number
  tab: string
}

export default defineComponent({
  name: 'PageHeaderWrapper',
  props: {
    tabkey: String,
    content: {
      type: String,
      default: ''
    },
    tabList: {
      type: Object as PropType<Tab[]>,
      default: () => []
    },
    tabActiveKey: {
      type: [String, Number]
    }
  },
  emits: ['update:tabkey'],
  setup(props, context) {
    const route = useRoute()
    const breadcrumbConverter = (
      routerMap: RouterMap[],
      name: string,
      breadcrumbs: Breadcrumb[] = []
    ): Breadcrumb[] => {
      for (const menu of routerMap) {
        if (menu.name === name) return breadcrumbs
        if (menu.children?.length) {
          const breadcrumbsChildren = breadcrumbConverter(
            menu.children,
            name,
            breadcrumbs.concat([{ name: menu.meta?.title ?? '', path: menu.path }])
          )
          if (breadcrumbsChildren.length) return breadcrumbsChildren
        }
      }
      return []
    }
    const breadcrumbs = breadcrumbConverter(asyncRouterMap, route.name?.toString() ?? '')
    const currentBreadcrumb: Breadcrumb = {
      name: route.meta?.title ?? '',
      path: route.path
    }
    return {
      breadcrumbs,
      currentBreadcrumb,
      handleTabsChange: (tabkey: string) => {
        context.emit('update:tabkey', tabkey)
      }
    }
  }
})
</script>

<style lang="less" scoped>
.content {
  padding: 24px;
}
::v-deep(.n-page-header-header) {
  margin-bottom: 10px;
}
::v-deep(.n-page-header-content) {
  margin-top: 10px;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.65);
}
</style>
